<template>
	<view>
		<view>
			<table-title content="维修服务办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<view>
				<small-title :isNeed="true" content="区域"></small-title>
				<radio-group :disabled="!(state === '待申请' || state === '管家已驳回')" class="radiogroup-style">
					<view @click="chooseWork" class="first-radio">
						<radio :disabled="!(state === '待申请' || state === '管家已驳回')" :checked="workChecked" color="#FF0000"></radio>
						<view >办公区域</view>
					</view>
					<view  @click="choosePublic" class="second-radio">
						<radio :disabled="!(state === '待申请' || state === '管家已驳回')" :checked="publicChecked" color="#FF0000"></radio>
						<view>公共区域</view>
					</view>
				</radio-group>
			</view>
			<view>
				<small-title :isNeed="true" content="问题描述"></small-title>
				<textarea class="textarea-style" maxlength="-1" :disabled="!(state === '待申请' || state === '管家已驳回')" :value="problemContent" @input="inputDetial"></textarea>
			</view>
			<small-title content="上传图片"></small-title>
			<view class="img-repair">
				<uni-file-picker 
				    v-model="imageValue"  
				    file-mediatype="image"
				    mode="grid"
				    file-extname="png,jpg"
				    :limit="3"
					ref="files"
					:auto-upload="false"
					:readonly="!(state === '待申请' || state === '管家已驳回')"
				    @select="select"
					@delete="deleteImg"
				/>
			</view>
			<small-title v-if="status > 2 && status != 7" content="维修清单"></small-title>
			<view v-if="status > 2 && status != 7" style="margin-left: 20rpx;margin-right: 20rpx;">
				<uni-table :newMinWidth="0" border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
				    <uni-tr>
						<uni-th style="width: 50rpx;" align="center">序号</uni-th>
				        <uni-th style="width: 50rpx;" align="center">项目</uni-th>
				        <uni-th style="width: 50rpx;" align="center">金额</uni-th>
				        <uni-th style="width: 50rpx;" align="center">负责人</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item,index) in goodList" :key="index">
				        <uni-td align="center">
							<view style="width: 60rpx;">{{index + 1}}</view>
						</uni-td>
				        <uni-td>
							<view style="width: 280rpx;">
								<input :disabled="true" type="text" v-model="item.goodsName" placeholder="请输入物品名称" />
							</view>
						</uni-td>
				        <uni-td>
							<view style="width: 100rpx;">
								<input :disabled="true" type="number" v-model="item.amount" placeholder="请输入" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 100rpx;">
								<input :disabled="true" type="text" v-model="item.unit" placeholder="" />
							</view>
						</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
			<view class="small-title" v-if="status > 2 && status != 7">费用合计：{{this.allPrice}} 元</view>
			<view v-if="status===3 && !(publicChecked||allPrice == 0)">
				<con-advance-pay-small-title content="支付方式"></con-advance-pay-small-title>
				<view style="display: flex;justify-content: center;">
					<radio-group class="payway-style" @change="changePayway">
						<label style="display: flex;">
							<radio :checked="payway[0]" class="payway-first-radio" color="#FF0000" value="alipay"></radio>
							<view class="payway-choice">
								<image src="../../../static/alipay-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">支付宝支付</view>
							</view>
						</label>
						<label style="display: flex;">
							<radio :checked="payway[1]" class="payway-second-radio" color="#FF0000" value="wechat"></radio>
							<view class="payway-choice">
								<image src="../../../static/wechat-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">微信支付</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<small-title v-if="status >= 0" content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===3 && (publicChecked||allPrice == 0)" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmPay('2021121210515022154','租户已确认维修项')">确认维修项</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open1">取消工单</button>
				</view>
			</view>
			<view v-if="status===3 && !(publicChecked||allPrice == 0)" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="onlinePay">确认并支付</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open1">取消工单</button>
				</view>
			</view>
			<view v-if="status===5" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="open">确认完成</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===-1" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder" >立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===7" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="reAddOrder" >重新申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请进行评价" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup1" type="dialog">
		    <uni-popup-dialog mode="base" message="成功消息" title="是否确认取消工单？" :duration="2000" :before-close="true" @close="close1" @confirm="confirm1"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE
	} from "../../..//util/network.js"
	import {
		myUploadFile,
		myDownloadFile,
		syncGetOrder,
	} from "../../..//util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				token:'',
				recordId:'',
				processNo:'待分配',
				state: '待受理',
				status: -1,
				publicChecked: true,
				workChecked: false,
				problemContent:'',
				areaType: -1,
				imageUrl: ['../../../static/add-logo.svg','../../../static/add-logo.svg','../../../static/add-logo.svg',
				           0,0,0],
				imageValue:[],
				imageTemps:[],
				allPrice: 0,
				payway: [true, false],                                                            //支付方式
				current: 0,
				comment:'',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				goodList:[],
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				previewUrl:ONLINE_SERVER_ADDRESS_BASE + '/file/preview/'
			}
		},
		methods: {
			select(e){
				console.log(e)
				e.tempFiles.forEach(item => {
					let a = myUploadFile(this.token, item.path)
					 a.then((v)=>{
						 let temp = {}
						 temp.url = item.url
						 temp.id = v
						 this.imageTemps.push(temp)
						 console.log(this.imageTemps)
					})
				})

			},
			deleteImg(e){
				// this.imageTemps.forEach((item, index) => {
				for (var i = 0; i < this.imageTemps.length; i++) {
					if(this.imageTemps[i].url == e.tempFile.url){
						this.imageTemps.splice(i, 1)
						break;
					}
				}
				console.log(this.imageTemps)
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'评价不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					this.comment = "用户评价：" + value
					this.modOrder()
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
			open1() {
				this.$refs.popup1.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close1() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup1.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm1(value) {
				this.$refs.popup1.close()
				this.cancelOrder()
			},
			inputDetial(e){
				this.problemContent = e.detail.value
			},
			/*
			功能：在线支付通用方法
			参数：无
			*/
		    onlinePay(){
				if(this.allPrice == 0){
					uni.showModal({
						content:'费用为0',
						showCancel:false
					});
					return 0
				}
		    	let orderInfo = "等后端接口"
				let orderNo = ""
		    	let paywaySingle = ''
				let _this = this
		    	if(this.payway[0]){
		    		paywaySingle = 'alipay'
		    	}else{
		    		paywaySingle = 'wxpay'
		    	}
				let extraInfo = {
						commentMsg: '租户已确认维修项，并已支付'                       //操作信息
					}
		    	uni.request({
		    		url:`${ONLINE_SERVER_ADDRESS_BASE}/pay/pay`,
		    		header: {
		    			'Authorization': this.token,
		    		},
		    		data: {
		    			orderName: "维修服务",
		    			payPlatform: paywaySingle,                        //待写入工单内容
						orderType:4,
						extraInfo:JSON.stringify(extraInfo),
						amount: Number(this.allPrice),
						recordId:this.recordId,
		    		},
		    		method:'POST',
		    		success: function (res) {
		    			console.log("提交成功",res.data);
		    			if(res.data.code == 200){
		    				if(paywaySingle == 'wxpay'){
		    					orderInfo = res.data.data.wxPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}else{
		    					orderInfo = res.data.data.aliPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}
		    				uni.requestPayment({  
		    					provider: paywaySingle,  
		    					orderInfo: orderInfo,  
		    					success: (e) => {  
		    						console.log(e);  
									uni.navigateBack()
									// _this.confirmPay(orderNo,"租户已确认维修项，并已支付")
		    					},  
		    					fail: (e) => { 
									console.log(e) 
		    					}  
		    				});
		    			}
		    		}
		    	})
		    },
			/*
			功能：添加一行放行物品信息
			参数：无
			*/
			addGoods(){
				this.goodList.push({'goodsName':'','amount':'','unit':''})
			},
			
			/*
			功能：子组件事件触发修改物品放行列表
			参数：
			index：当前物品序号
			goodsName：物品名称
			amount：数量
			unit：单位
			*/
			changeGoods(index, goodsName, amount, unit){
				this.goodList[index].goodsName = goodsName;
				this.goodList[index].amount = amount;
				this.goodList[index].unit = unit;
			},
			
			/*
			功能：子组件事件触发删除当前行物品
			参数：
			index：当前物品序号
			*/
			remove(index){
				console.log("[info]","调试父子组件通信，我是父组件" + index)
				this.goodList.splice(index,1)
			},
			choosePublic(){
				if(this.state === '待申请' || this.state === '管家已驳回'){
					this.workChecked = false
					this.publicChecked = true
					console.log(this.workChecked)
				}
			},
			chooseWork(){
				if(this.state === '待申请' || this.state === '管家已驳回'){
					this.workChecked = true
					this.publicChecked = false
				}
			},
			/*
			功能：支付截图点击事件触发修改或预览照片，如果是待申请 则点击修改照片，否则则是预览
			参数：无
			*/
			chooseImage(index){
				console.log("ceshi",index)
				if(this.state === '待申请' || this.state === '管家已驳回') {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['compressed'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.imageUrl[index + 3] = v
							})
							this.imageUrl[index] = res.tempFilePaths[0];
							this.$forceUpdate()
						}
					})
				}else{
					console.log("ceshi",this.imageUrl[index])
					uni.previewImage({
						current: 0,
						urls: [this.imageUrl[index]]
					})
				}
			},
			/*
			功能：选择支付方式
			参数：无
			*/
			changePayway(e){
				console.log('-change事件:', e.detail.value)
				if(e.detail.value == "alipay"){
					this.payway=[true,false];
				}else{
					this.payway=[false,true];
				}
			},
			async loadImg(chargeFileId){
				// let _this = this
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(){
				if(this.problemContent == ''){
					uni.showModal({
						content:'请输入问题描述',
						showCancel:false,
					})
					return -1
				}
				console.log("[info]","工单已创建，工单号为：" + this.recordId)
				let areaType = 0
				if(this.workChecked){
					areaType = 0
				}else{
					areaType = 1
				}
				let imgArray = []
				for (var i = 0; i < this.imageTemps.length; i++) {
					imgArray.push(this.imageTemps[i].id)
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/repair/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						areaType: areaType,
						description: this.problemContent,                        //待写入工单内容
						fileIds: imgArray,
						isUrgent: 1,
						commentMsg: '发起申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("提交成功",res.data);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					}
				})
			},
			modOrder(){
				console.log("[info]","收到维修服务办结：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/repair/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						comment:this.comment,
						commentMsg: '用户已确认维修完毕,' + this.comment,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("维修服务申请办结调用失败")
					}
				})
			},
			confirmPay(orderNo,content){
				console.log("[info]","收到维修服务办结：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/repair/pay-confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						orderNo:orderNo,
						commentMsg:content,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("weixiu",res)
						if(res.data.code == 200 || res.data.code == 4000){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("维修服务申请办结调用失败")
					}
				})
			},
			cancelOrder(){
				console.log("[info]","收到维修服务办结：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/repair/cancel/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '取消维修，办结'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
						console.log("用户申请取消成功",res);
					},
					fail: (res) => {
						console.log("用户申请取消调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("repair/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.auditStatus)
						 switch(this.status) {
						 	 case 0:
						 		this.state = "待管家审核"
						 		break;
						 	 case 1:
						 		this.state = "待指派工程"
						 		break;
						 	 case 2:
						 		this.state = "待工程确认"
						 		break;
						 	 case 3:
						 		this.state = "待确认支付"
						 		break;
						 	 case 4:
						 		this.state = "待施工完毕"
						 		break;
						 	 case 5:
						 		this.state = "待验收结果"
						 		break;
						 	 case 6:
						 		this.state = "已完成维修"
						 		break;
						 	 case 7:
						 		this.state = "管家已驳回"
						 		break;
						 	 case 8:
						 		this.state = "已取消工单"
						 		break;
						 	 default:
						 	    this.status = -1
						 		this.state = "待申请"
						 } 
						 if(res.data.data.areaType == 0){
						 	 this.workChecked = true
						 	 this.publicChecked = false
						 }else{
						 	 this.workChecked = false
						 	 this.publicChecked = true
						 }
						 this.problemContent = res.data.data.description
						 this.processNo = res.data.data.processOn
						 try{
							 var photoArray = res.data.data.photo.split(",")
							 this.imageValue = []
							 this.imageTemps = []
							 for (var i = 0; i < photoArray.length; i++) {
								let index = i
								let temp = {}
								temp.url = this.previewUrl + photoArray[i]
								temp.id = parseInt(photoArray[i])
								this.imageTemps.push(temp)
								this.imageValue.push(temp)
							 }
						 }catch(e){
						 	//TODO handle the exception

						 }
						 this.goodList = JSON.parse(res.data.data.detail)
						 this.allPrice = res.data.data.price
						 this.proccessListDefult = processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 this.$forceUpdate()
					}
				})
			},
			reAddOrder(){
				if(this.problemContent.trim() == ''){
					uni.showModal({
						content:'请输入问题描述',
						showCancel:false,
					})
					return -1
				}
				let areaType = 0
				if(this.workChecked){
					areaType = 0
				}else{
					areaType = 1
				}
				let imgArray = []
				for (var i = 0; i < this.imageTemps.length; i++) {
					imgArray.push(this.imageTemps[i].id)
				}
				console.log("[info]","重新提交：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/repair/mod/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						areaType: areaType,
						description: this.problemContent,                        //待写入工单内容
						fileIds: imgArray,
						isUrgent: 1,
						commentMsg: '重新发起申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("维修服务申请重新提交成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("维修服务申请重新提交调用失败")
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
				this.state = option.state
				// this.state = "待申请"
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
			//根据当前页面维修清单计算金额
			for (var i = 0; i < this.goodList.length; i++) {
				this.allPrice += Number(this.goodList[i].amount)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 300rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 300rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.picture-part{
		display: flex;
		margin: 0 0 50rpx 0;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 170rpx;
		height: 170rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 170rpx;
		height: 170rpx;
		margin: 0 0 10rpx 0rpx;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 665rpx;
		margin-left: 18rpx;
	}
	.payway-first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.payway-second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
	}
	.img-repair{
		margin: 20rpx 50rpx 20rpx 50rpx;
	}
</style>
